<template>
  <div id="rootfooter">
    <van-tabbar id="footer" v-model="active" active-color="black" inactive-color="white">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" replace to="/second">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" replace to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" replace to="/wode">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>

// import { ref } from 'vue';
export default {
      data(){
          return{
            active:0
          }
      }
};
</script>

<style scoped lang="scss">
#footer {
  background: linear-gradient(to top, rgb(248, 81, 27), rgb(252, 226, 196));
}

.van-tabbar-item--active {
  color: white;
  background: linear-gradient(to top, rgb(248, 81, 27), rgb(252, 226, 196));
}
</style>